@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		/* light */
		--immich-primary: 66 80 175;
		--immich-bg: 255 255 255;
		--immich-fg: 0 0 0;
		--immich-gray: 246 246 244;
		--immich-error: 229 115 115;
		--immich-success: 129 199 132;
		--immich-warning: 255 183 77;

		/* dark */
		--immich-dark-primary: 172 203 250;
		--immich-dark-bg: 0 0 0;
		--immich-dark-fg: 229 231 235;
		--immich-dark-gray: 33 33 33;
		--immich-dark-error: 211 47 47;
		--immich-dark-success: 56 142 60;
		--immich-dark-warning: 245 124 0;
	}
}

@font-face {
	font-family: 'Overpass';
	src: url('$lib/assets/fonts/overpass/Overpass.ttf') format('truetype-variations');
	font-weight: 1 999;
	font-style: normal;
	ascent-override: 100%;
}

@font-face {
	font-family: 'Overpass Mono';
	src: url('$lib/assets/fonts/overpass/OverpassMono.ttf') format('truetype-variations');
	font-weight: 1 999;
	font-style: monospace;
	ascent-override: 100%;
}

:root {
	/* Default colors */
	--primary-color: #f5deb3;
	--secondary-color: #000000;
	font-family: 'Overpass', sans-serif;
	/* Used by layouts to ensure proper spacing between navbar and content */
}

:root.dark {
	color-scheme: dark;
}

:root:not(.dark) {
	color-scheme: light;
}

html {
	height: 100%;
	width: 100%;
	font-size: 17px;
}

div.weather-info {
	display: flex;
	vertical-align: middle;
}

div.weather-location {
	display: inline-block;
	order: 2;
	margin-right: 0.25em;
}

div.weather-temperature {
	display: inline-block;
	order: 3;
}

div.weather-unit {
	display: inline-block;
	order: 4;
}

img.icon-weather {
	display: inline-block;
	vertical-align: middle;
	margin-top: -8px;	/* adjust icon top to line up with text */
	order: 1;
}